<template>
  <div class="app-container">
    <div style="border: 1px solid #ccc;">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
      <Editor :style="{ height: minHeight + 'px' }" style=" overflow-y: hidden" v-model="localValue"
        :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated"  @input="updateValue"  />
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui';
import { getToken } from "@/utils/auth";
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  name: "RichText",
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: "",
      redirect: true
    },
    /* 高度 */
    height: {
      type: Number,
      default: null,
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null,
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false,
    },
    // 上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: "url",
    }
  },
  data() {
    return {
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 图片上传
          uploadImage: {
            server: process.env.VUE_APP_BASE_FILE + "/common/oSSUpload",
            fieldName: 'file',
            // 单个文件的最大体积限制，默认为 2M
            maxFileSize: 10 * 1024 * 1024, // 10M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
              // token: 'xxx',
              // otherKey: 'yyy'
              // file:''
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,

            // 自定义增加 http  header
            headers: {
              Authorization: "Bearer " + sessionStorage.getItem("token")
            },

            // 跨域是否传递 cookie ，默认为 false
            withCredentials: true,

            // 超时时间，默认为 10 秒
            timeout: 10 * 1000, //10 秒

            // 上传前
            onBeforeUpload(files) {
              Message({
                message: '图片正在上传中,请耐心等待',
                duration: 0,
                customClass: 'uploadTip',
                iconClass: 'el-icon-loading',
                showClose: true
              });
              return files;
            },
            // 自定义插入图片
            customInsert(res, insertFn) {
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              Message.closeAll();
                if (res.code === 200) {
                Message.success({
                  message: `${res.originalFilename} 上传成功`
                });
              } else {
                Message.error({
                  message: `${res.originalFilename} 上传失败，请重新尝试`
                });
              }
              insertFn(process.env.VUE_APP_BASE_FILE +res.url, res.originalFilename, process.env.VUE_APP_BASE_FILE +res.url);
            },

            // 单个文件上传成功之后
            onSuccess(file, res) {
              console.log(`${file.name} 上传成功`, res);
            },

            // 单个文件上传失败
            onFailed(file, res) {
              console.log(`${file.name} 上传失败`, res);
            },

            // 上传进度的回调函数
            onProgress(progress) {
              console.log('progress', progress);
              // progress 是 0-100 的数字
            },

            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              console.log(`${file.name} 上传出错`, err, res);
            }
          },
        }
      },
      mode: 'default', // or 'simple'
      uploadUrl: process.env.VUE_APP_BASE_FILE + "/common/oSSUpload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + sessionStorage.getItem("token")
      },
      localValue: ''
    };
  },
  components: { Editor, Toolbar },
  created() { },
  mounted() { },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  watch: {
    value: {
      handler(val) {
        this.localValue = val;
      },
      immediate: true,
    },
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    updateValue() {
      this.$emit('update-value', this.localValue);
    }
  }
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
